@model WalkingTec.Mvvm.Doc.ViewModels.StudentVms.StudentListVm
<style>
    a {
        color: #01aaed
    }
</style>
<wt:fieldset field-set-style="Simple" title="Grid">
 </wt:fieldset>
   <p>使用框架提供的grid控件可以快速输出列表</p>
    <table lay-filter="parse-table-demo">
        <thead>
            <tr>
                <th lay-data="{field:'username', width:200}">属性</th>
                <th lay-data="{field:'joinTime', width:600}">描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Id</td>
                <td>控件Id，默认根据绑定字段名称生成，非必填</td>
            </tr>
            <tr>
                <td>Vm</td>
                <td>绑定字段，必填，必须是一个继承BasePagedListVM的类</td>
            </tr>
            <tr>
                <td>SearchPanelId</td>
                <td>配套的搜索框Id，默认根据绑定字段名称生成，非必填</td>
            </tr>
            <tr>
                <td>HiddenPanel</td>
                <td>是否隐藏列表外面的Panel</td>
            </tr>
            <tr>
                <td>HiddenCheckbox</td>
                <td>是否隐藏列表第一列的勾选框</td>
            </tr>
            <tr>
                <td>HiddenGridIndex</td>
                <td>是否隐藏列表序号</td>
            </tr>
            <tr>
                <td>CheckedAll</td>
                <td>是否全部选择</td>
            </tr>
            <tr>
                <td>CheckboxIndex</td>
                <td>当前选中行</td>
            </tr>
            <tr>
                <td>Width</td>
                <td>列表宽度</td>
            </tr>
            <tr>
                <td>Height</td>
                <td>列表高度</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>直接用Data渲染列表，而不从服务器读取数据</td>
            </tr>
            <tr>
                <td>UseLocalData</td>
                <td>直接从ListVM的EntityList获取数据</td>
            </tr>
            <tr>
                <td>Height</td>
                <td>列表高度</td>
            </tr>
            <tr>
                <td>MultiLine</td>
                <td>单元格是否自动换行，默认为否</td>
            </tr>
        </tbody>
    </table>

    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="效果" />
            <wt:tabheader title="代码" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent >
                <wt:grid vm="@Model" use-local-data="true" height="300"/>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:grid vm="@@Model" use-local-data="true" /&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>
    <wt:quote>
        <p>显示Grid的前台代码非常简单，复杂的逻辑都在它绑定的ListVM中，比如设定列表显示的列，列表的按钮，列表是否可编辑等等都要在ListVM中设置，具体请参考<a href="/#/VM/List">ListVM</a></p>
    </wt:quote>

<wt:fieldset field-set-style="Simple" title="SearchPanel">
</wt:fieldset>
    <p>SearchPanel是和Grid配套的，用于展示搜索条件的Panel</p>
    <table lay-filter="parse-table-demo">
        <thead>
            <tr>
                <th lay-data="{field:'username', width:200}">属性</th>
                <th lay-data="{field:'joinTime', width:600}">描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Id</td>
                <td>控件Id，默认根据绑定字段名称生成，非必填</td>
            </tr>
            <tr>
                <td>Vm</td>
                <td>绑定字段，必填，必须是一个继承BasePagedListVM的类</td>
            </tr>
            <tr>
                <td>GridId</td>
                <td>配套的GridId，默认根据绑定字段名称生成，非必填</td>
            </tr>
            <tr>
                <td>SearchBtnId</td>
                <td>搜索按钮Id，非必填</td>
            </tr>
            <tr>
                <td>ResetBtnId</td>
                <td>重置按钮Id，非必填</td>
            </tr>
            <tr>
                <td>ResetBtn</td>
                <td>是否显示重置按钮</td>
            </tr>
        </tbody>
    </table>

    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="效果" />
            <wt:tabheader title="代码" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent >
                <wt:searchpanel vm="@Model" reset-btn="true" grid-id="gg2">
                    <wt:row items-per-row="ItemsPerRowEnum.Three">
                        <wt:textbox field="Searcher.LoginName" />
                        <wt:textbox field="Searcher.Name" />
                        <wt:combobox field="Searcher.IsValid" empty-text="全部" />
                    </wt:row>
                </wt:searchpanel>
                <wt:grid vm="@Model"  id="gg2" height="400"/>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:searchpanel vm="@@Model" reset-btn="true"&gt
    &ltwt:row items-per-row="ItemsPerRowEnum.Three"&gt
        &ltwt:textbox field="Searcher.LoginName" /&gt
        &ltwt:textbox field="Searcher.Name" /&gt
        &ltwt:combobox field="Searcher.IsValid" empty-text="全部" /&gt
    &lt/wt:row&gt
&lt/wt:searchpanel&gt
&ltwt:grid vm="@@Model"  /&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>
    <wt:quote>
        <p>SearchPanel内部和普通Form一样，可以使用各种控件和排版，它的作用就是通过绑定ListVM中Searcher里面的各种查询条件，将查询条件传递给后台方法</p>
        <p>如果在页面展现之前，在后台已经给ListVM的Searcher里面的某些变量赋值了，那么在前台不需要写SearchPanel，Grid就会按照已赋值的搜索条件进行搜索。这种方法非常适合展示搜索条件固定的列表。</p>
    </wt:quote>

<script>
layui.use('code',function(){layui.code({ about: false })})
        layui.table.init('parse-table-demo', {
        limit: 100, page: false
        });
</script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
